<template>
  <div>
    <center>
      <!-- 题库详情 -->
      <el-descriptions v-if="isEx" class="all-class" title="题库信息" border size="small" labelClassName="descriptions-label-class">
        <el-descriptions-item label="名称">{{bank.name}}</el-descriptions-item>
        <el-descriptions-item label="报名起始时间">{{parseObj(bank.info)[0]}}</el-descriptions-item>
        <el-descriptions-item label="报名截止时间">{{parseObj(bank.info)[1]}}</el-descriptions-item>
        <el-descriptions-item label="总题数">{{bank.total}}</el-descriptions-item>
<!--        <el-descriptions-item label="类别">-->
<!--          <dict-tag :options="dict.type.ex_question_bank_train" :value="bank.trainFlag"/>-->
<!--        </el-descriptions-item>-->
        <el-descriptions-item label="考试日期范围">
          {{JSON.parse(bank.info)[0]}}~{{JSON.parse(bank.info)[1]}}
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions v-else class="all-class" title="题库信息" :column="4" border size="small" labelClassName="descriptions-label-class">
        <el-descriptions-item label="名称">{{bank.name}}</el-descriptions-item>
        <el-descriptions-item label="描述">{{bank.info}}</el-descriptions-item>
        <el-descriptions-item label="总题数">{{bank.total}}</el-descriptions-item>
        <el-descriptions-item label="类别">{{bank.category}}</el-descriptions-item>
      </el-descriptions>

      <!-- 题目列表 -->
      <div class="all-class" v-infinite-scroll="load" style="overflow:auto;height: 700px">
        <div v-for="(question,index) in questionList">
          <el-descriptions :title="(index+1)+'、 '+question.content" :column="1">
            <el-descriptions-item v-for="option in question.optionList" :label="option.k">
              <span v-if="option.r" style="color: #13ce66">{{option.v}}</span>
              <span v-else>{{option.v}}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <el-alert type="success" :closable="false" style="height: 20%" v-if="loading" v-loading="loading" element-loading-text="加载中....."></el-alert>
      </div>
    </center>
  </div>
</template>
<script>

import {getQuestion_bank} from '@/api/ex/question_bank'
import {listQuestion} from '@/api/ex/question'
import {pushAll} from "@/utils/zzDouUtils/arrayUtil";
import {parseObj} from "@/utils/zzDouUtils/ObjUtil";
import {addEx_study_count} from '@/api/ex/study_count'
import { InfiniteScroll } from "element-ui"

function sleep(milliseconds) {
  return new Promise(resolve => setTimeout(resolve, milliseconds));
}

export default {
  dicts: ['ex_question_bank_train'],
  directives: {
    "infinite-scroll": InfiniteScroll
  },
  data() {
    return {
      bankId: null,
      bank: null,
      isEx: false,
      questionList:[],
      pageNum:1,
      pageSize:10,
      loading: false
    }
  },
  created() {
    this.bankId = this.$route.params && this.$route.params.bankId;
    this.addExStudyCount();
    this.getQuestionBank();
  },
  methods: {
    parseObj,
    /** 获取题库信息 */
    getQuestionBank(){
      getQuestion_bank(this.bankId).then(response=>{
        this.bank = response.data;
        this.isEx = response.data.isEx === 1;
        this.load();
      })
    },
    /** 添加一条学习记录 */
    addExStudyCount(){
      let obj = {bankId:this.bankId};
      addEx_study_count(obj).then(response=>{});
    },
    async load(){
      if (this.pageNum <= this.bank.total / this.pageSize + 1){
        this.loading = true;
        await sleep(500);
        const obj = {pageNum: this.pageNum,pageSize:this.pageSize,bankId:this.bankId};
        listQuestion(obj).then( response => {
          pushAll(this.questionList,response.rows);
          this.pageNum++
          this.loading = false;
        })
      }else{
        this.loading = false;
      }
    },
  }
}
</script>
<style>
.descriptions-label-class{
  width: 100px;
}
.all-class{
  margin-top: 20px;
  width: 90%;
}
</style>
